<script setup>
import { computed, ref } from 'vue'
const msg = ref('三二一')
const reversedMsg = computed(() => [...msg.value].reverse().join(''))

const time = ref(new Date())
const formatterTime = computed(() =>
  time.value.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    weekday: 'long'
  })
)

const studentList = ref([
  { id: 1, name: 'John', score: 95 },
  { id: 2, name: 'Michael', score: 84 },
  { id: 3, name: 'William', score: 68 },
  { id: 4, name: 'David', score: 59 },
  { id: 5, name: 'James', score: 72 },
  { id: 6, name: 'Robert', score: 88 },
  { id: 7, name: 'Richard', score: 47 },
  { id: 8, name: 'Charles', score: 66 },
  { id: 9, name: 'Thomas', score: 90 },
  { id: 10, name: 'Christopher', score: 55 },
  { id: 11, name: 'Daniel', score: 61 },
  { id: 12, name: 'Matthew', score: 43 },
  { id: 13, name: 'Anthony', score: 77 },
  { id: 14, name: 'Mark', score: 58 },
  { id: 15, name: 'Donald', score: 69 },
  { id: 16, name: 'Steven', score: 73 },
  { id: 17, name: 'Paul', score: 45 },
  { id: 18, name: 'Andrew', score: 80 },
  { id: 19, name: 'Joshua', score: 62 },
  { id: 20, name: 'Kevin', score: 49 }
])

const filterMode = ref('all')

const filteredStudent = computed(() => {
  if (filterMode.value === 'all') return studentList.value
  if (filterMode.value === 'pass') return studentList.value.filter(item => item.score > 60)
  return studentList.value.filter(item => item.score <= 60)
})

function handleClick(mode) {
  filterMode.value = mode
}

const flag = ref(false)
</script>

<template>
  <main>
    <div>{{ reversedMsg }}</div>
    <div>{{ formatterTime }}</div>
    <div class="flex gap-4">
      <button class="btn" @click="handleClick('all')">全部</button>
      <button class="btn" @click="handleClick('pass')">通过</button>
      <button class="btn" @click="handleClick('fail')">未通过</button>
      <button :class="`btn ${flag ? 'text-blue-500' : 'text-green-500'}`">click</button>
      <button :class="['btn', flag ? 'text-red-500' : 'text-amber-500']">click2</button>
    </div>
    <ul>
      <li v-for="student in filteredStudent" :key="student.id">{{ student.name }} ({{ student.score }})</li>
    </ul>
  </main>
</template>
